<template>
  <div class="version-upgrade common-page">
    <div class="version-img-box">
      <img
        src="http://alivod.sdxgxx.cn/image/default/509ED4AB0B614D809C7F0EAC4E150F42-6-2.png"
        alt=""
      >
      <div class="upgrate-version-box">
        <div>
          <span>版本升级中…</span>
          <span>{{versionInfo.version}}</span>
        </div>
      </div>
      <span class="version-time">
        {{endTime}} 等你来体验
      </span>
    </div>
    <div class="new-function-box">
      <span class="title">新功能：</span>
      <div class="new-function-detail">
        <span v-html="versionInfo.detail"></span>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import appVersion from "@/common/api/appVersion";
import Share from "./mixin/share";
import { formatTime } from "@/common/utils/time";

export default {
  name: "VersionUpgrade",
  components: {},
  mixins: [Share],
  data() {
    return {
      versionInfo: {},
      endTime: "",
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.setShare();
    this.getVersionUpgrateInfo();
  },
  mounted() {},
  methods: {
    // 获取版本升级信息
    getVersionUpgrateInfo() {
      this.$toast.loading();
      appVersion.getVersionInfo().then((data) => {
        this.$toast.clear();
        this.versionInfo = data.data;
        this.generateShowTime(data.data.endTime);
      });
    },
    generateShowTime(tempTime) {
      let monthTime = formatTime(tempTime, "MM月DD日");
      let time = Number(formatTime(tempTime, "h"));
      let timeText = "";
      if (time >= 0 && time <= 6) {
        timeText = "凌晨";
      }else if (time > 6 && time <= 9) {
        timeText = "早上";
      }else if (time > 9 && time <= 12) {
        timeText = "上午";
      }else if (time > 12 && time <= 14) {
        timeText = "中午";
      }else if (time > 14 && time <= 17) {
        timeText = "下午";
      }else if (time > 17 && time <= 19) {
        timeText = "傍晚";
      }else if (time > 19 && time < 24) {
        timeText = "凌晨";
      }else{
        timeText = "凌晨";
      }
      timeText=timeText+formatTime(tempTime, "hh时mm分")
      this.endTime = monthTime+timeText
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.version-upgrade {
  background: #ffffff;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  padding-bottom: 46px;
  box-sizing: border-box;
  .version-img-box {
    width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 37px;
    img {
      width: 100%;
      height: auto;
    }
    .upgrate-version-box {
      width: 100%;
      height: 50%;
      padding-left: 60px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      div {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        span:first-child {
          margin-top: 101px;
          font-size: 50px;
          font-weight: 600;
          color: #ffffff;
          line-height: 64px;
        }
        span:nth-child(2) {
          padding: 0 17px;
          height: 46px;
          margin-top: 16px;
          background: #ff922b;
          border-radius: 23px;
          font-size: 30px;
          font-weight: 500;
          color: #ffffff;
          line-height: 46px;
        }
      }
    }
    .version-time {
      width: 100%;
      display: inline-block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #3f87f0;
      line-height: 45px;
    }
  }
  .new-function-box {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    .title {
      display: inline-block;
      margin-bottom: 16px;
      font-size: 30px;
      color: #222222;
      line-height: 42px;
    }
    .new-function-detail {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      span {
        width: 100%;
        display: inline-block;
        font-size: 24px;
        color: #888888;
        line-height: 34px;
      }
    }
  }
}
</style>
